<!-- 小组件 块 行 -->
<template>
  <el-row :gutter="20">
    <el-col>
      <div class="grid-content bg-purple">
        <div class="Statistics">
          <p>{{title}}</p>
          <!-- <span>{{number}}</span> -->
          <countTo :startVal='0' :endVal='number' :duration='5000'></countTo>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import countTo from 'vue-count-to';
export default {
  components: {
    countTo
  },
  data () {
    return {

    };
  },
  props: {
    title: {
      type: String,
      default: '统计量'
    },
    number: {
      type: String | Number,
      default: 0
    }
  },
  computed: {},
  watch: {},
  methods: {

  },
  created () {

  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.Statistics {
    /* width: 236px; */
    height: 68px;
    background: rgba(8, 8, 95, 1);
    opacity: 1;
    text-indent: 30px;
    border-radius: 5px;
}
.Statistics p {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 40px;
    color: rgba(255, 255, 255, 1);
}

.Statistics span {
    display: inline-block;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(32, 206, 102, 1);
}
</style>